<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="twitter4j.Twitter" %>
<%@ page import="twitter4j.User" %>
<%@ page session="true" %>


<%if(null == session.getAttribute("twitter")){%>
	You will need to login to enter a comment!<br>
    <a href="../twitter/signin?redirectUrl=/test/viewarticle?articleId=${articleDto.articleId}"><img src="../resources/images/Sign-in-with-Twitter-darker.png"/></a>
<%}
else{%>

<div>
	Enter Your Comment: <br><textarea id="commentText" cols=40 rows=1></textarea>
</div>

<div>
	<button data-dojo-type="dijit/form/Button" type="button" id="commentButton" label="Post Comment"></button>
</div>

	<%
		Twitter twitter = (Twitter) session.getAttribute("twitter");
		User twitterUser = twitter.showUser(twitter.getId());
		long id = twitter.getId();
		String name = twitterUser.getName();
		String screenName = twitterUser.getScreenName();
		String picUrl = twitterUser.getProfileImageURL();
		String bigPicUrl = twitterUser.getBiggerProfileImageURL();
		String miniPicUrl = twitterUser.getMiniProfileImageURL();
		String articleId = (String) request.getParameter("articleId");
	%>
	
	<input id="userType" value="twitter" type="hidden"/>				
	<input id="userExternalId" value="<%= id %>" type="hidden"/>			
	<input id="userName" value="<%= name %>" type="hidden"/>			
	<input id="userScreenName" value="<%= screenName %>" type="hidden"/>			
	<input id="userPicUrl" value="<%= picUrl %>" type="hidden"/>			
	<input id="userBigPicUrl" value="<%= bigPicUrl %>" type="hidden"/>			
	<input id="userMiniPicUrl" value="<%= miniPicUrl %>" type="hidden"/>			
	<input id="articleId" value="<%= articleId %>" type="hidden"/>				

<%}%>
<div>
<br>
<c:forEach var="comment" items="${comments}">
    <div>
    	<img src="${comment.commentor.picUrl}"/>
    </div>
    <div>
    	<c:out value="${comment.commentor.name}"/>
    </div>
    <div>
    	<c:out value="${comment.createdOn}"/>
    </div>
    <div>
    	Comment: <c:out value="${comment.commentText}"/>
    </div>
    <hr/>    
</c:forEach>
</div>
<script>
require(["footballblog/FootballblogApiClient", "dojo/parser", "dijit/form/Button", 
         "dojo/dom", "dojo/dom-attr", "dojo/on"], 
		function(FootballblogApiClient, parser, button, dom, domattr, on){
	parser.parse();
	
	on(dom.byId("commentButton"), "click", function(evt){
		
		var userType = domattr.get(dom.byId("userType"), "value");
		var userExternalId = domattr.get(dom.byId("userExternalId"), "value");
		var userName = domattr.get(dom.byId("userName"), "value");
		var userScreenName = domattr.get(dom.byId("userScreenName"), "value");
		var userPicUrl = domattr.get(dom.byId("userPicUrl"), "value");
		var userBigPicUrl = domattr.get(dom.byId("userBigPicUrl"), "value");
		var userMiniPicUrl = domattr.get(dom.byId("userMiniPicUrl"), "value");
				
		var apiClient = new FootballblogApiClient();
		apiClient.postUser(userType, userExternalId, userName, userScreenName, userPicUrl, userBigPicUrl, userMiniPicUrl, 
				function(userId){
			console.log("user Id fetched! it is: " + userId);
			var articleId = domattr.get(dom.byId("articleId"), "value");			
			console.log("articleId is: " + articleId);
			var commentText = domattr.get(dom.byId("commentText"), "value");
			apiClient.postComment(articleId, userId, commentText, function(){
				console.log("commented posted!");
				location.reload();
			});
		});		
	});
});	
</script>
